import { Component, createRef } from "react"
import src from '../images/avatar.png'

class Form extends Component {
  state = {
    txt: ""
  }
  // 创建 ref 对象
  txtRef = createRef()
  handleChange = (e) => {
    this.setState({
      txt: e.target.value
    })
  }
  add = () => {
    console.log(this.txtRef)
    if (this.state.txt.trim() === '') {
      alert('请输入内容')
      return this.txtRef.current.focus()
    }
    this.props.addComment(this.state.txt)
    this.setState({
      txt: ''
    })
  }
  render () {
    return (
      <div className="comment-send">
        <div className="user-face">
          <img className="user-head" src={src} alt="" />
        </div>
        <div className="textarea-container">
          <textarea onChange={this.handleChange}
            cols="80"
            rows="5"
            value={this.state.txt}
            placeholder="发条友善的评论"
            className="ipt-txt"
            ref={this.txtRef}
          />
          <button className="comment-submit" onClick={this.add
            // this.props.addComment()
            // document.querySelector('.ipt-txt').value = ''
          }>发表评论</button>
        </div>
        <div className="comment-emoji">
          <i className="face"></i>
          <span className="text">表情</span>
        </div>
      </div>
    )
  }
}
export default Form 